<template>
  <div id="app">
    <router-view :key="$route.fullPath" />
    <van-tabbar v-if="isShow" v-model="active" active-color="#f00" route>
      <van-tabbar-item icon="wap-home-o" replace to="/Mindex"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="search" replace to="/Msecrah"
        >搜索</van-tabbar-item
      >
      <van-tabbar-item icon="service-o">k歌</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Icon } from "vant";
export default {
  name: "App",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Icon.name]: Icon,
  },
  data() {
    return {
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      active: 0,
      isShow: false,
    };
  },
  methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  },
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.windowWidth = window.fullWidth; // 宽
      })();
    };
    if (that.windowWidth < 1000) {
      that.isShow = true;
    } else if (that.windowWidth > 1000) {
      that.isShow = false;
    }
    if (this._isMobile()) {
      // 跳转至手机端路由
      // alert("手机端");
      that.$router.push({ path: "/Mindex" }).catch((err) => {});
    } else {
      // 跳转至 pc 端路由
      // alert("pc端");
      that.$router.push({ path: "/index" }).catch((err) => {});
    }
  },
  watch: {
    windowWidth(val) {
      let that = this;
      if (val < 1000 && that.$route.path == "/index") {
        that.$router.push({ path: "/Mindex" }).catch((err) => {});
        that.isShow = true;
      } else if (val > 1000 && that.$route.path == "/Mindex") {
        that.$router.push({ path: "/index" }).catch((err) => {});
        that.isShow = false;
      } else if (val < 1000 && that.$route.path == "/secrah") {
        that.isShow = true;
        that.$router.push({ path: "/Msecrah" }).catch((err) => {});
      } else if (val > 1000 && that.$route.path == "/Msecrah") {
        that.isShow = false;
        that.$router.push({ path: "/secrah" }).catch((err) => {});
      }
    },
  },
};
</script>

<style>
</style>
